vocaloidfandomcom-20200222-history
Help:Choosing colors
This is a guideline policy for pages featured on the VOCALOID Wiki. While participation is encouraged it is requested that you first understand and follow these guidelines or refrain from editing. The basics Terms Some terms to know before starting: *'Complementary Colors' - colors that are opposite of each other on the color wheel *'Analogous Colors' - colors that are side by side on the color wheel *'Hex color code' - Standardized color codes used to specify colors across the web. They start with number sign (#) and are mixture of a total of six letters and numbers (ex. #4ebbb4) **Despite the letters sometimes being written in all capitals, lowercase can be used too since it doesn’t actually matter *'Song Box' - refers to the *'Derivative works' - refers to the Default colors These colors are seen as defaults for various templates around the wiki. They also act as an indicator in cases of coding mishaps. Inputs This is example of what you may see upon editing a template parameter: ;|color = : #70bebf; color: #000000; To put it simply, ;|color = : #This code controls the background; color: #This code controls the outline/text; Tips to consider Do's and don'ts When picking colors, first and foremost; DO NOT pick complementary colors, especially for text! Complementary colors will strain the readers eyes, so pick colors that do not clash and are easy to read (the to use to check your color choices). Colors that are sure to go well together are Analogous colors. The Relevance of colors Picking relevant ''colors is a must to create a consistent theme on the page. What may be considered “relevant” differs from song to song. The main image will be important in deciding the overall theme of the page which in turn will determine what colors are relevant to use. ''Analogous colors will also play a huge part in determining this. Here are a few websites that may make it easier for you to pick colors as they will generate a palette right from the picture that you can use! Colors generated right from the image will insure that the page will have a flowing, balanced theme that fits with the main image. CSS Drive's Image to Colors Palette Generator ''' - By uploading or linking a picture one can easily access a palette with colors lifted off the image. '''Pros *Clicking the color swatches will give hex code immediately *Selected colors can be clicked to be compared side by side in the history box *Automatically generates a “Light”, “Medium” and “Dark” palette Cons *Colors can be rather limited *No selection tool if you need to select a certain color from the image *If you want to check another color side by side to one you’ve already clicked you’ll have to restart the process again Colormind's Image Color Extraction ''' - By uploading or linking a picture one can easily access a palette with colors lifted off the image. '''Pros *Based on artificial intelligence, it will choose colors that looks well in a color palette rather than colors that's more representeative *The hex code is already featured below the color swatches Cons *Colors can be rather limited *No selection tool if you need to select a certain color from the image Examples Processing choices *Examine the main image **What are the two to four main colors in the image? **What theme does the picture have? Light, dark, etc.? *Consider what main colors can be paired together (Use the color wheel!) *Pick the colors *Copy and put the hex code(s) in *Check work through the “preview” button **Additionally, codes may be experimented with in a Sandbox *Publish page once satisfactory theme has been obtained Limited palette カゲロウデイズ (Kagerou Daze) *Has a Limited Palette *Main colors: Red, Blue, White and Black *The colors in the main image have greatly contrasting colors which you should be wary of as they can clash very easily. Right away it should be noticed that Red and the Blue (or Cyan) are Complementary colors meaning that they should be NOWHERE NEAR each other. *No! *Yes~! *Preferably not, but is acceptable. The reasons being the Song_box and Derivative templates have a surrounding border, if the text is pure white then it makes this border harder to see. So consider a darker shade of white. Complex palette カンタレラ (Cantarella) *Has a Dark Palette *Main Colors: Blue, Green, Purple and maybe even Gold *Since KAITO is the main character of this song, a relevant color should be blue, so one of the first color choices should be a blue (note the color should not be “blue” but “a blue”). Considering his grim surroundings of purple, we can consider that to be relevant color so that shall be the second color choice. Hatsune Miku is the other main character in this song and thus a green '''color shall be a choice to use. Other than the blue and purple which have already been used, '''gold seems to be a big part of the picture as well and nicely enough, green and gold (yellow) are Analogous colors as well so those can be a pair. *No! *Yes~! *Preferably not, but is acceptable. The reasons being the Song_box and Derivative templates have relatively small text with a bold outline, if the text as dark as the surrounding colors then it makes it harder to see. So consider a lighter shade of color. Basically: *If a dark background is chosen - use a light outline/text *If a light background is chosen - use a dark outline/text. Credits to user Sen for this tutorial.